<template>
    <div class="mian">
      <div class="head">
        方案
      </div>
      <div class="body">
        <el-table
          :data="programmes"
          style="width: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column
            prop="ernu"
            label="比赛记录"
            width="110">
          </el-table-column>
          <el-table-column
            prop="prtitle"
            label="标题"
            width="100">
          </el-table-column>
          <el-table-column
            prop="prcontent"
            label="内容"
            width="150">
          </el-table-column>
          <el-table-column
            prop="prdate"
            label="时间"
            width="170">
          </el-table-column>
          <el-table-column
            prop="prprice"
            label="金额"
            width="80">
          </el-table-column>
          <el-table-column
            prop="prbuynum"
            label="购买人数"
            width="92">
          </el-table-column>
          <el-table-column
            prop="prlikes"
            label="点赞人数"
            width="92">
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEditProgramme(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDeleteProgramme(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pageInfo.pageSize"
            layout="prev, pager, next, jumper"
            :total="pageInfo.itemCount">
          </el-pagination>
        </div>
        <addProgramme v-if="addDialogIsShow" ref="showAddProgramme"></addProgramme>
        <editProgramme v-if="editDialogIsShow" ref="showEditProgramme"></editProgramme>
        <deleteProgramme v-if="deleteDialogIsShow" ref="showdeleteProgramme"></deleteProgramme>
      </div>
      <el-button size="mini" @click="handleAddProgramme">
        新增
      </el-button>
    </div>
</template>

<script>
  import api from "../../../../axios/api"
  import addProgramme from '@/components/front/expert/programme/addProgramme.vue'
  import editProgramme from '@/components/front/expert/programme/editProgramme.vue'
  import deleteProgramme from '@/components/front/expert/programme/deleteProgramme.vue'
  import utilsFd from '../../../../static/js/utils/index.js'
  export default {
    name: "plan",
    addDialogIsShow:false,
    editDialogIsShow:false,
    deleteDialogIsShow:false,
    components:{
      addProgramme,editProgramme,deleteProgramme
    },
    data(){
      return {
        programmes:[],
        addDialogIsShow:false,
        editDialogIsShow:false,
        deleteDialogIsShow:false,
        currentPage: 1,
        pageInfo:{}
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.setDataFromAxios(val);
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 == 0) {
          return 'warning-row';
        } else {
          return '';
        }
        return '';
      },
      setDataFromAxios: function (currPage) {
        if(currPage!=null){
          this.currentPage = currPage;
        }
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/api/programmes/pageInfo?currPage="+this.currentPage+"&pageSize=5", null, "get")
          .then(res => {
            console.log(res)
            this.programmes = res.tList;
            this.pageInfo = res.obj;
            this.programmesData();
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },
      handleEditProgramme:function(index,programme){
        console.log(index + "   "+ programme.uId);
        let _this = this;   //this代表方法调用者 this代表vue对象
        _this.editDialogIsShow = true;
        _this.$nextTick(() => {  //下一步操作
          _this.$refs.showEditProgramme.init(programme);  //找到vue对象中定义ref集合（$refs就是ref集合 上面ref定义的名字叫showAddProgramme）调用子组件的init方法
        })
      },
      handleDeleteProgramme: function (index, programme) {
        let _this = this;
        _this.deleteDialogIsShow = true;
        _this.$nextTick(() => {
          _this.$refs.showdeleteProgramme.init(programme);
        })
      },
      handleAddProgramme:function(){
        let _this = this;   //this代表方法调用者 this代表vue对象
        _this.addDialogIsShow = true;
        _this.$nextTick(() => {  //下一步操作
          _this.$refs.showAddProgramme.init();  //找到vue对象中定义ref集合（$refs就是ref集合 上面ref定义的名字叫showAddProgramme）调用子组件的init方法
        })
      },
      procesDate(date) {
        var date = new Date(date)
        console.log(date)
        date  = utilsFd.FD.Fd().format(date)
        return date
      },
      programmesData() {
        for (var i = 0; i < this.programmes.length; i++) {
          this.programmes[i].prdate = this.procesDate(this.programmes[i].prdate);
          this.programmes[i].prtime = this.procesDate(this.programmes[i].prtime);
          //console.log(this.user.orderForms[i].uresdate)
        }
      },
    },
    created:function () {
      this.setDataFromAxios();//1.创建页面的时候 调用自定义的数据请求方法  而数据请求方法把得到数据赋值给了当前页面的变量
    }
  }
</script>

<style scoped lang="stylus">
  .mian
     width 1000px
     height 500px
     margin 30px auto
     .head
       font-size 25px
       font-weight bold

</style>
